<template>
	<view style="margin: 0 50rpx 0;">
		<view class="title">请输入新登录密码</view>
		<view class="password">
			<input class="uni-input" password type="text" placeholder="6-12位，需包含数字和字母" v-model="passOne" />
			<input class="uni-input" password type="text" placeholder="请再次输入密码" v-model="passTwo" />
		</view>
		<!-- 确定按钮 -->
		<view class="btn">
			<view class="enter" @click="sure">确定</view>
		</view>
		<view class="mask" v-show="isShow">
			<view>密码设置成功</view>
			<view>自动跳转到登录页请重新登录</view>
		</view>
	</view>
</template>

<script>
	// import { sendCodeFour } from '../../api'
 	export default {
		data() {
			return {
				passOne: '',
				passTwo: '',
				isShow: false
			}
		},
		methods: {
			sure() {
				// 密码中必须包含大小写 字母、数字、特称字符，至少6个字符，最多12个字符；
				let pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{6,12}')
				if (this.passOne == '' || this.passTwo == '') {
					uni.showToast({
					    title: '密码不能为空',
						icon: 'none'
					});
				} else if (this.passOne !== this.passTwo) {
					uni.showToast({
					    title: '两次输入不一致',
						icon: 'none'
					});
				} else if (!pwdRegex.test(this.passOne)) {
					uni.showToast({
					    title: '请输入6-12位，需包含数字和字母',
						icon: 'none'
					});
				} else {
					this.isShow = true
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/public/newLogin'
						})
					},1000)
				}
				
			}
		}
	}
</script>

<style lang='scss'>
	.title {
		font-family: SourceHanSansCN-Regular;
		font-size: 30rpx;
		padding-top: 60rpx;
		color: #1a1a1a;
		text-align: center;
	}
	.password {
		margin-top: 50rpx;
		input {
			height: 108rpx;
			border-bottom: 1px solid #e6e6e6;
			padding-left: 10rpx;
		}
	}
	.btn {
		margin-top: 60rpx;
		.enter {
			height: 90rpx;
			background-image: linear-gradient(-90deg,
					#fe8700 0%, 
					#ff9e2c 100%), 
				linear-gradient(-89deg, 
					#e95783 0%, 
					#fe93a3 100%), 
				linear-gradient(
					#cb9e5f, 
					#cb9e5f);
			border-radius: 45rpx;
			color: #fff;
			border: none;
			text-align: center;
			line-height: 90rpx;
			font-size: 32rpx;
		}
		.enter:active {
			opacity: 0.9;
		}
	}
	.mask {
		position:fixed;
		width:100%;
		height:100%;
		background-color:#000;
		opacity:0.7;
		filter:alpha(opacity=70);
		left:0;
		bottom: 0;
		z-index:100;
		color: #fff;
		view {
			text-align: center;
			font-size: 28rpx;
		}
		view:nth-child(1) {
			padding-top: 320rpx;
		}
		view:nth-child(2) {
			padding-top: 10rpx;
		}
	}
</style>
